import React, { useState } from 'react';
import { useRoutes, Navigate, useLocation, useNavigate } from 'react-router-dom';
import { Menu, Button, Input, Avatar, Layout } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, MailOutlined, BellOutlined } from '@ant-design/icons';
import items from './data.jsx';
import './App.css';

const { Header, Sider, Content } = Layout;
// 懒加载组件
let Login = React.lazy(() => import('./components/login/login.jsx'));
let Board = React.lazy(() => import('./components/boerd/Board.jsx'));
let Ec = React.lazy(() => import('./components/Ec/Ec.jsx'));
let Goods = React.lazy(() => import('./components/Ec/Goods.jsx'));
let Order = React.lazy(() => import('./components/Ec/Order.jsx'));
let Invoice = React.lazy(() => import('./components/Ec/Invoice.jsx'));
let Calendar = React.lazy(() => import('./components/Calendar.jsx'));
let Email = React.lazy(() => import('./components/Message/Email.jsx'));
let Chat = React.lazy(() => import('./components/Message/Chat.jsx'));
let Contacts = React.lazy(() => import('./components/Message/Contacts.jsx'));
let Todo = React.lazy(() => import('./components/Todo.jsx'));
let File = React.lazy(() => import('./components/File.jsx'));
let Lxr=  React.lazy(() => import('./components/Message/Lxr.jsx'));
const siderStyle = {
    backgroundColor:'#001529'
};
export default function App1() {
    const ly = useLocation();
    let name= sessionStorage.getItem('username')
    const nav = useNavigate();
    const [value,setvalue]=useState('')
    const [collapsed, setCollapsed] = useState(false);
    let [dj,setdj]=useState(false)

    const data = [
        { path: '/login', element: <Login /> },
        { path: '/board', element: <Board /> },
        {
            path: '/ec',
            element: <Ec />,
            children: [
                { path: '', element: <Navigate to="goods" /> },
                { path: 'goods', element: <Goods /> },
                { path: 'order', element: <Order /> },
                { path: 'invoice', element: <Invoice /> }
            ]
        },
     
        { path: '/chat', element: <Chat /> },
        { path: '/contacts', element: <Contacts /> },
        { path: '/todo', element: <Todo /> },
        { path: '/file', element: <File /> },
        { path: '/calendar', element: <Calendar /> },
        { path: '/', element: <Navigate to='/login' /> },
        { path: '*', element: <>404</> }
    ];

    const route = useRoutes(data);
    const onClick = e => {
        setdj(false)
        setvalue('')
        nav(e.key);
    };
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    let a =ly.pathname.split('/')
    
   
    return (
        <>
            {
                ly.pathname === '/login' ? (
                    <Content style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        {route}
                    </Content>
                ) : (
                    <Layout style={{ minHeight: '80vh' }}>
                        <Sider
                            collapsible
                            collapsed={collapsed}
                            onCollapse={toggleCollapsed}
                            width={200}
                            style={siderStyle}
                            theme="dark"
                        >
                            <span style={{ color: 'white', marginLeft: '10px', display: 'block', padding: '10px 10px' }}>
                                Maijia
                            </span>
                            <Button
                                type="primary"
                                onClick={toggleCollapsed}
                                style={{ marginBottom: 16, marginLeft: '10px' }}
                            >
                                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            </Button>
                            <Menu
                                onClick={onClick}
                                defaultSelectedKeys={[ly.pathname]}
                                defaultOpenKeys={['/'+a[1]]}
                                mode="inline"
                                theme="dark"
                                inlineCollapsed={collapsed}
                                items={items}
                            />
                        </Sider>
                        <Layout>
                            <Header
                                style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    padding: '8px 16px',
                                    backgroundColor: '#f5f5f5',
                                    borderBottom: '1px solid #e8e8e8',
                                    justifyContent: 'space-between'
                                }}
                            >
                                <span style={{ fontSize: '14px', color: '#333' }}>
                                    欢迎{name}来到后台管理系统
                                </span>
                                <Input
                                value={value}
                                onChange={(e) => setvalue(e.target.value)}
                                    size="large"
                                    placeholder="请输入搜索内容"
                                    style={{ width: '300px', borderRadius: '4px' }}
                                    prefix={<UserOutlined />}
                                />
                                <div style={{ display: 'flex', justifyContent: 'space-around', width: '20vw' }}>
                                    <MailOutlined  />
                                    <BellOutlined />
                                   
                                  <div onClick={()=>{setdj(true)}}> {name? <div  style={{  width: '36px',height: '36px',lineHeight:'36px',borderRadius: '50%',backgroundColor:' blue',display: 'flex',
  alignitems: 'center',justifyContent:'center',color:'white',fontWeight: '500', }}>{name?.charAt(0).toUpperCase()}</div>: <Avatar size={64} icon={<UserOutlined />} />}
                                    </div> 
                                </div>
                            </Header>
                            <Content
                                style={{
                                    margin: 0,
                                     minHeight: 'calc(100vh - 48px)'
                                }}
                            >
                                {dj?<Lxr value={value}></Lxr>:route}
                           
                            </Content>
                        </Layout>
                    </Layout>
                )
            }
        </>
    );
}


